{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>编辑轮播图</h5>
                </div>
                <div class="ibox-content layui-form">
                    <div class="layui-row layui-col-space10 layui-form-item ">

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">名称：</label>
                            <div class="layui-input-block">
                                <input type="text" value="{$banner.banner_name}" name="banner_name" lay-verify="required" placeholder="名称" class="layui-input">
                            </div>
                        </div>

                        <!--<div class="layui-form-item layui-col-md-offset1 layui-col-md8">-->
                            <!--<label class="layui-form-label">缩略图：</label>-->
                            <!--<input type="hidden" name="banner_thumb" id="lay-img" lay-verify="image">-->
                            <!--<div class="layui-input-block">-->
                                <!--<div id="lay-upload">上传图片</div>-->
                                <!--<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">-->
                                    <!--预览图：-->
                                    <!--<div class="layui-upload-list" id="lay-list">-->
                                        <!--<img class="layui-append-img" src="{$banner.banner_thumb}" onerror="this.src='/static/admin/images/no_img.jpg'">-->
                                    <!--</div>-->
                                <!--</blockquote>-->
                            <!--</div>-->
                        <!--</div>-->

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">缩略图：</label>
                            <div class="layui-input-block">
                                <input type="hidden" id="data_photo1" name="banner_thumb" lay-verify="headCrop1">
                                <div id="fileList1" class="uploader-list" style="float:right"></div>
                                <div  style="float:left" class="layui-btn" onclick="wk.layer_show1('上传图片',$('#headCrop1'),700,610);">选择图片</div>
                                <img id="img_data1" class="img-circle" height="80px" width="80px" src="{$banner.banner_thumb}" style="float:left;margin-left: 50px;margin-top: -10px;cursor:pointer;" src="/static/admin/images/head_default.gif" />
                            </div>
                        </div>

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8 form-group">
                            <label class="layui-form-label">状态：</label>
                            <div class="layui-input-block">
                                <select name="banner_status" >
                                    <option value="1" {if $banner['banner_status']==1}selected{/if}>上架</option>
                                    <option value="2" {if $banner['banner_status']==2}selected{/if}>下架</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <label class="layui-form-label">排序：</label>
                            <div class="layui-input-block">
                                <input type="text" name="banner_sort" lay-verify="required" value="{$banner.banner_sort}" placeholder="排序" class="layui-input" oninput="value=value.replace(/[^\d]/g,'')">
                            </div>
                        </div>

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8 form-group" id="banner_type">
                            <label class="layui-form-label">类型：</label>
                            <div class="layui-input-block">
                                <select name="banner_type" lay-filter="role1">
                                    <option value="1" {if $banner['banner_type']==1}selected{/if}>外链</option>
                                    <option value="2" {if $banner['banner_type']==2}selected{/if}>赛事</option>
                                    <option value="3" {if $banner['banner_type']==3}selected{/if}>图文</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8 {$banner.banner_type != 1?'hidden':''} " id="banner_link">
                            <label class="layui-form-label">外链：</label>
                            <div class="layui-input-block">
                                <input type="text" name="banner_link" placeholder="外链地址,例 http://www.baidu.com" class="layui-input" value="{$banner.banner_link}">
                            </div>
                        </div>

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8 {$banner.banner_type != 2?'hidden':''} " id="match_id">
                            <label class="layui-form-label">赛事：</label>
                            <div class="layui-input-block">
                                <select name="banner_match_id"  xm-select="select" xm-select-search="" xm-select-radio="" xm-select-search-type="dl">
                                    {foreach name="match" item="vo"}
                                    <option value="{$vo.match_id}" {$vo.match_id==$banner.banner_match_id?'selected':''}>{$vo.match_title}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item layui-col-md-offset1 layui-col-md10 {$banner.banner_type != 3?'hidden':''} " id="banner_content">
                            <label class="layui-form-label">内容：</label>
                            <div class="layui-input-block" id="LAY_editor" lay-verify="editor">
                                <p>{$banner.banner_content}</p>
                            </div>
                        </div>

                        <input type="hidden" value="{$banner_id}" name="banner_id">
                        <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="component-form-element">保存
                                </button>
                                <button class="layui-btn layui-btn-primary" onclick="history.go(-1)">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer" /}
<div id="headCrop1" style="display:none">
    <div class="tailoring-content-one">
        <label title="选择图片" for="chooseImg1" class="layui-btn" style="font-weight: normal">
            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg1" class="hidden" onchange="selectImg1(this)"><i class="fa fa-cloud-upload"></i>
            选择图片
        </label>
    </div>
    <div class="ibox-content">
        <div class="tailoring-content">
            <div class="tailoring-content-two">
                <div class="tailoring-box-parcel" style="text-align: center">
                    <img id="tailoringImg1">
                    <span class="word" style="position:relative;top:50%;font-size:14px;color: #c2c2c2">仅支持JPG、JPEG、PNG格式的图片文件</span><br>
                    <!--<span class="size" style="position:relative;top:50%;font-size:16px">文件不能大于2MB</span>-->
                </div>
                <div class="preview-box-parcel">
                    <!--<p>图片预览：</p>-->
                    <div class="square previewImg"></div>
                    <div class="circular previewImg"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <span class="layui-btn cropper-reset-btn" style="float:left">复位</span>
        <span class="layui-btn zoomIn" style="float:left">放大</span>
        <span class="layui-btn zoomOut" style="float:left">缩小</span>
        <span class="layui-btn cropper-rotate-btn" style="float:left">旋转</span>
        <span class="layui-btn cropper-scaleX-btn" style="float:left">换向</span>
        <span class="layui-btn " id="sureCut1"><i class="fa fa-save"></i> 保存</span>
        <span class="layui-btn layui-btn-primary" onclick="layer.closeAll()"><i class="fa fa-close"></i> 关闭</span>
    </div>
</div>
<script type="text/javascript" src="__JS__/Crop.js"></script>
<script>
    var editor = wk.wang({elem:'#LAY_editor'});
    wk.uploadImg({size:5,type:'png,jpg,jpeg',url:"{:url('Upload/upload')}",domain:""});
    layui.use(['form','upload','layedit'], function() {
        var form = layui.form;
        form.on('submit(component-form-element)', function (data) {
            data.field.banner_content = editor.txt.html();
            $('.layui-btn').addClass('layui-disabled').attr('disabled','disabled');
            $.ajax({
                url:"{:url('bannerEdit')}",
                type:'post',
                dataType:'json',
                data:data.field,
                success:function(res){
                    if (res.code == 200) {
                        wk.success(res.msg,"{:url('Banner/index')}")
                    } else {
                        wk.error(res.msg,'','$(".layui-btn").removeClass(\'layui-disabled\').removeAttr(\'disabled\');');
                    }
                }
            })
        });
        form.on('select(role1)', function(data){
            if(data.value == 1){
                $('#banner_link').removeClass('hidden');
                $('#match_id').addClass('hidden');
                $('#banner_content').addClass('hidden');
            }else if(data.value == 2){
                $('#banner_link').addClass('hidden');
                $('#match_id').removeClass('hidden');
                $('#banner_content').addClass('hidden');
            }else{
                $('#banner_link').addClass('hidden');
                $('#match_id').addClass('hidden');
                $('#banner_content').removeClass('hidden');
            }
        });
    });
</script>
<script>
    //裁剪后的处理
    $("#sureCut1").on("click",function () {
        if ($("#tailoringImg1").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg1').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $("#img_data1").attr('src',base64url).show();
            $('#data_photo1').val(base64url);
            //关闭裁剪框
            layer.closeAll();
        }
    });
</script>
</body>
</html>
